import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Row, Col, Select } from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import styles from '../index.less';

const { Item } = Form;
const { Option } = Select;

// 员工发起申请
const BasicInfo = props => {
    const { form, type, detail } = props;
    const {
        currentProcessTaskInstance: { relatedBusinessObject }
    } = detail;
    const { getFieldDecorator } = form;
    const getPositiveDate = (entryDate, count = relatedBusinessObject.tryDuration || 3) => {
        if (!entryDate) return '';
        const rt = new Date(entryDate);
        rt.setMonth(rt.getMonth() + count);
        rt.setDate(rt.getDate() - 1);
        return moment(rt).format('YYYY-MM-DD');
    };
    const [regularDate, setPositiveDate] = useState(
        relatedBusinessObject.regularDate || getPositiveDate(relatedBusinessObject.entryDate)
    );
    const columnList = [
        { label: '员工姓名', prop: 'employeeName' },
        { label: '隶属公司', prop: 'companyName' },
        { label: '部门', prop: 'departmentName' },
        { label: '职位', prop: 'postName' },
        { label: '职级', prop: 'postGradeCode' },
        { label: '直属上级', prop: 'leader' },
        { label: '入职日期', prop: 'entryDate' }
    ];
    const changeSelect = val => {
        setPositiveDate(getPositiveDate(relatedBusinessObject.entryDate, val));
    };
    const infoLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 }
        }
    };
    const infoLayout2 = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 4 }
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 6 }
        }
    };
    const monthOptions = [
        { label: '1个月', value: 1 },
        { label: '2个月', value: 2 },
        { label: '3个月', value: 3 },
        { label: '4个月', value: 4 },
        { label: '5个月', value: 5 },
        { label: '6个月', value: 6 },
        { label: '7个月', value: 7 },
        { label: '8个月', value: 8 },
        { label: '9个月', value: 9 }
    ];
    const mapOptions = monthOptions.reduce((prev, curr) => {
        prev[curr.value] = curr.label;
        return prev;
    }, {});
    return (
        <div>
            <div className={styles.title} style={{ borderTopColor: 'transparent' }}>
                员工基本信息
            </div>
            <div
                className={classNames({
                    [styles.detailBasicInfo]: type === 'detail',
                    [styles.basicInfo]: type !== 'detail'
                })}
            >
                <Row gutter={16}>
                    {columnList.map(item => (
                        <Col span={item.prop === 'employeeName' ? 24 : 12}>
                            <Item
                                label={item.label}
                                // Todo 因为原型长相第一栏姓名独占一行，测试就要求跟原型一致，所以这边针对姓名prop的栅格进行了覆盖
                                {...{ ...infoLayout, ...(item.prop === 'employeeName' ? infoLayout2 : {}) }}
                                key={item.prop}
                            >
                                {getFieldDecorator(item.prop, {
                                    initialValue: relatedBusinessObject[item.prop]
                                })(<span>{relatedBusinessObject[item.prop]}</span>)}
                            </Item>
                        </Col>
                    ))}
                    <Col span={12}>
                        <Item
                            label="试用期"
                            // style={{ marginTop: type !== 'detail' ? '12px' : '' }}
                            {...infoLayout}
                            key="basicTryDuration"
                        >
                            {type !== 'detail' &&
                                getFieldDecorator('tryDuration', {
                                    rules: [{ required: true }],
                                    initialValue: relatedBusinessObject.tryDuration || 3
                                })(
                                    <Select onChange={changeSelect}>
                                        {monthOptions.map(item => (
                                            <Option value={item.value}>{item.label}</Option>
                                        ))}
                                    </Select>
                                )}
                            {type === 'detail' &&
                                getFieldDecorator('tryDuration', {
                                    initialValue: relatedBusinessObject.tryDuration
                                })(
                                    <span>
                                        {mapOptions[relatedBusinessObject.tryDuration] ||
                                            `${relatedBusinessObject.tryDuration}个月`}
                                    </span>
                                )}
                        </Item>
                    </Col>
                    <Col span={12}>
                        <Item
                            label="预计转正日期"
                            // style={{ marginTop: type !== 'detail' ? '12px' : '' }}
                            {...infoLayout}
                            key="basicRegularDate"
                        >
                            {type !== 'detail' &&
                                getFieldDecorator('regularDate', {
                                    initialValue: regularDate
                                })(<Input disabled></Input>)}
                            {type === 'detail' && <span>{regularDate}</span>}
                        </Item>
                    </Col>
                </Row>
            </div>
        </div>
    );
};

BasicInfo.propTypes = {
    /**
     * detail: 详细
     * edit: 员工发起
     */
    type: PropTypes.oneOf(['edit', 'detail']).isRequired
};

export default BasicInfo;
